<template>
  <div class="select-container">
    <div class="current-value">
      <div class="wraper flex-container">
        <div class="selset-wraper flex-container"
         @click="showSelects" 
         @mouseenter.stop.prevent="mouseenter"
         @mouseleave.stop.prevent="mouseLeave"
        >
          <input
            type="text"
            ref="selectInput"
            @focus="selectFocus"
            @blur="blurSelect"
            style="position:absolute; left0: 0;z-index:-1"
          />
          <div class="current-select">
              <div v-if="currentIndex ===-1">
                  年份筛选
              </div>
            <div v-else>
              {{lists[currentIndex].year}}
            </div>
            <div class="select-lists" v-if="showLists">
              <div class="lists-item" v-for="(item, index) in lists" :key="index" @mousedown="selectItem(index)">
                {{ item.year }}
              </div>
            </div>
          </div>
          <div :class="[mouseIn ? 'triangle-down-hover':'triangle-down','triangle']"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "process-select",
  data() {
    return {
      currentIndex: -1,
      showLists: false,
    //   lists: ["年份筛选","2022", "2021", "2020", "2019"],
      mouseIn:false,
      mouseOut:!this.mouseIn,
      timer:null
    };
  },
  props: {
    lists: {
      type: Array,
      default: function(){
        return []
      },
    },
  },
  methods: {
    selectItem(index){
        // debugger
      this.currentIndex = index
      this.showLists = false
      this.mouseIn = false
      this.$emit("callback",{index:index})
    },
    mouseLeave(){
      this.mouseIn = false
      this.showLists = false
    },
    mouseenter(){
      this.mouseIn = true
    },
    blurSelect() {
        this.showLists = false
        // debugger
        // if(this.timer){
        //     clearTimeout(this.timer)
        // }
        // this.timer = setTimeout(()=>{
        //     this.showLists = false
        // },200)
    },
    selectFocus() {
      this.showLists = true;
    },
    showSelects() {
      this.$refs["selectInput"].focus();
    },
  },
};
</script>

<style scoped lang="less">
.triangle{
    position: absolute;
    right: 10px;
}
.triangle-down-hover{
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #B8262C;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #414141;
}
.flex-container {
  display: flex;
  align-items: center;
}
.wraper {
  // position: relative;
}
.selset-wraper:hover{
    color: #B8262C;
    cursor: pointer;
  }
.selset-wraper {
  position: relative;
  border: 2px solid #414141;
  border-radius: 5px;
  font-size: 20px;
  padding-right: 10px;
  box-sizing: border-box;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #414141;
  width: 124px;
  justify-content: flex-start;
  padding-left: 10px;
  box-sizing: border-box;
  height: 35px;
  line-height: 35px;
  .current-select{
    position: relative;
    font-size: 20px;
    .select-lists {
      position: absolute;
      z-index: 101;
      left: -10px;
      color: #414141;
      width: 124px;
      background: #f6f6f6;
      border-radius: 0 0 5px 5px;
      overflow: hidden;
      .lists-item{
        padding: 0 10px;
      }
    }
    .lists-item:hover{
      color: #B8262C;
    }
  }
  
}
</style>